<template>
	<div id="Search">
			<div>
				<div>
				<i class="fa fa-search" ></i>
				<input type="text" value="" v-model="searchBtn"/>
			    </div>
			</div>
	   <h3>电影/电视剧/综艺</h3>
		<ul>
			<li v-for="item in searchData" :key="item.id">
				<div>
					<img :src="item.img" >
				</div>
				<div>
					<p class="title">{{item.title}}</p>
					<p> 剧情，喜剧，犯罪</p>
					<p>{{item.time}}</p>
				</div>
				<div class="one">
					{{item.scores}}
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
			name:'Search',
		    methods:{
				getSearchData(){
					var that=this;
					axios.get('/mock/searchData.json')
					.then(function(response){
						console.log(response);
						if(response.status==200){
							if(response.data && response.data.searchData){
								that.searchData =response.data.searchData;	
							} 
						}
					})
					.catch(function(error){
						console.log(error)
					})
				}
			},
			created(){
				this.getSearchData();
			},
			data(){
				return{
					searchBtn:'',
					searchData:[]
				}	
			},
			    watch:{
			        searchBtn(){
			            axios
			            .get('/mock/searchData.json')
			            .then((response)=>{
			              if(response.status === 200){
			                if(response.data && response.data.searchData){
			                    this.searchData =response.data.searchData.filter(
			                        (movie)=>{
			                            return movie.title.includes(this.searchBtn.trim());
			                        }
			                    )
			                }
			            }
			            })
			            .catch((err)=>{
			                console.log(err);
			            })
			        }
			    }
		}
		
		
</script>
 <style scoped>
	 #Search{
		 padding-bottom: 50px;
	 }
	 #Search>div{
			background: #f5f5f5;
			padding: 10px;
	}
	#Search>div div{
			background:white;
			border: 1px solid #CCCCCC;
			border-radius: 5px;
			padding: 2px;
	}
	input{
			border:none;
			outline: none;
	}
	h3{
		font-size: 18px;
		color: #999;
		border-bottom: 1px solid #CCCCCC;
	    padding: 10px;
	}	 
     li div{
		 float: left;
	 }
	img{
		width: 80px;
	}	
	li{
		overflow: hidden;
		padding: 10px;
		border-bottom: 1px dashed  #ccc;
	}
	li div:nth-of-type(2){
		padding: 10px;
	}
	li div:nth-of-type(2) p{
		line-height: 30px;
	}
	.title{
		font-weight: bold;
		font-size: 20px;
	}
	.one{
		float: right;
		color: #FF9900;
		font-weight: bolder;
		font-size: 20px;
	}
</style> 
